<div id="timeline" class="timeline-left" ms-timeline ms-timeline-load-more="vm.loadNextPage()">

    <!-- TIMELINE ITEM -->
    <div ms-timeline-item layout="column" layout-align="center center" layout-gt-md="row"
         layout-align-gt-md="center start"
         ng-repeat="timelineItem in vm.timeline">

        <div class="timeline-card" layout="row" flex="50">
            <!-- MS-CARD -->
            <ms-card template="timelineItem.card.template" ng-model="timelineItem.card"></ms-card>
            <!-- / MS-CARD -->
        </div>

        <div class="timeline-point md-accent-bg md-whiteframe-2dp">
            <md-icon md-font-icon="{{timelineItem.icon}}"></md-icon>
        </div>

        <div class="timeline-detail" flex="50">
            <div class="time">
                {{timelineItem.time}}
            </div>
            <div class="event">
                {{timelineItem.event}}
            </div>
        </div>
    </div>
    <!-- / TIMELINE ITEM -->

</div>